import Vue from 'vue'
import loading from './loading'
// 简单阐述流程 ：

// 1、使用vue.extend() 创建子类 返回一个实例
// 2、实例原型上定义方法 close
// 3、根据实例创建组件并且挂载到body上

// 使用extend 创建子类（构造函数）
let financeLoading = Vue.extend(loading)
let load = false
// 在原型上写入close方法
financeLoading.prototype.close = function () {
    if (load) {
        load = false
    }
    // 隐藏之后将组将从body中移除并销毁组价
    setTimeout(() => {
        if (this.$el && this.$el.parentNode) { // this.$el.parentNode为body
            this.$el.parentNode.removeChild(this.$el)
        }
        this.$destroy() // 销毁组价
    }, 300)
}
// 将组件挂载在body
// 显示组件
const Load = (options = {}) => {
    if (load) {
        return load
    }
    // 准备要挂载的元素
    let parent = document.body
    // 准备组件参数
    let opts = {
        text: '',
        ...options
    }
    //准备组件
    let instance = new financeLoading({
        el: document.createElement('div'), // 作为挂载节点 会被 Vue生成的 DOM 替换
        data: opts
    })
    // 将元素插入 body 中
    parent.appendChild(instance.$el)
    // 显示loading 组件
    Vue.nextTick(() => {
        instance.visible = true
    })
    load = instance // 是否存在实例的标识
    return instance // 返回实例方法用于调用内部close 方法
}

export default Load